<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- faq -->
		<div class="faq">
			<div class="faqTop">{{ str }}</div>
			<div class="faqBody">
				<div v-for="(item, index) in listData" @click="goDetils(item)" :key="index" class="faqItem hand f f-a-c f-j-b p-l-10 p-r-10">
					<div class="countNei">{{ item.title }}</div>
					<img src="/src/assets/user/2.png" class="img" alt="" />
				</div>
			</div>
		</div>
		<div style="margin-bottom: 80px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" :default-page-size="5" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { ArticleListBot } from "@/api/knowClub/index.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { useRoute } from "vue-router";
	let statusTab = ref(1);
	let total = ref(0);
	let pageNum = ref(1);
	let pageSize = ref(5);
	let route = useRoute();
	let listData = ref([]);
	let str = route.query.str;
	let num = route.query.num;
	onMounted(() => {
		list();
		window.addEventListener("scroll", handleScroll);
	});
	const goDetils = item => {
		router.push({
			path: "/HelpSupportDetils",
			query: {
				id: item.id,
				str: str
				// name: item.title
			}
		});
	};
	const list = async () => {
		let n = await ArticleListBot({
			tabId: num,
			pageNum: pageNum.value,
			pageSize: pageSize.value
		});
		listData.value = n.data.list;
		total.value = n.data.total;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .el-pager li:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li.is-active {
		color: #000000 !important;
	}

	::v-deep .el-pagination button:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li {
		font-size: px(24) !important;
		margin: 0 8px;
	}

	::v-deep .el-pagination .btn-next .el-icon {
		font-size: 20px !important;
	}

	::v-deep .el-pagination .btn-prev .el-icon {
		font-size: 20px !important;
	}
	.faq {
		width: 1280px;
		margin: 0 auto;

		.faqTop {
			font-size: 28px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: left;
			color: #02102e;
			margin-bottom: 35px;
		}

		.faqBody {
			width: 100%;
			// border: 1px solid #dddee1;
			border-radius: 16px;
			// padding: 12px 45px;
			margin-bottom: 40px;

			.more {
				font-size: 16px;
				font-family: Manrope, Manrope-400;
				font-weight: 400;
				text-decoration: underline;
				text-align: left;
				color: #8590a1;
				padding-left: 10px;
				margin: 24px 0;
			}

			.faqItem {
				height: 70px;
				border-bottom: 1px solid #dddee1;

				.countNei {
					font-size: 20px;
					font-family: Manrope, Manrope-500;
					font-weight: 500;
					color: #02102e;
				}

				.img {
					height: 14px;
				}
			}
		}
	}
</style>
